<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>报表明细</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <link href="./source/css/element-ui@2.4.0.index.css" rel="stylesheet" type="text/css" />
</head>
<div id="app" class="asn-history-page">
    <!--<div class="header">
        <div class="base-width">
            <a href="./main.html">
                <img class="logo" src="../source/img/logo.png" alt="" />
            </a>
        </div>
    </div>-->

    <div class="base-width">
        <h1 style="text-align: center">报表明细</h1>

        <el-form :inline="true" :model="formData" ref="form" class="form" style="margin-top:50px;">
            <el-form-item label="选择日期">
                <el-date-picker
                        v-model="formData.createdate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        clear-icon="el-icon-error"
                        placeholder="开始日期">
                </el-date-picker>
                <span>至</span>
                <el-date-picker
                        v-model="formData.enddate"
                        format="yyyy-MM-dd"
                        clear-icon="el-icon-error"
                        value-format="yyyy-MM-dd"
                        placeholder="截止日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item class="search-form-item">
                <el-button type="primary" class="search-btn" @click="onSearch('form')">查询</el-button>

                <el-button class="download-btn" @click="exportExcel">
                    导出EXCEL
                </el-button>
            </el-form-item>
        </el-form>

        <div class="history-list">
            <el-table
                    v-loading="loading"
                    :data="listData"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="Year"
                        label="发起月份"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="BillNo"
                        label="文件编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="Project"
                        label="所属项目（一级）"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="Project2"
                        label="分类（二级）"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="WorkFile"
                        label="所属流程"
                        width="220">
                </el-table-column>
                <el-table-column
                        prop="FileName"
                        label="文件名"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="Amount"
                        label="金额"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="User1"
                        label="刘轮"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="User2"
                        label="刘力"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="User3"
                        label="辛水平"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="User4"
                        label="徐敬羡"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="User5"
                        label="樊均辉"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="State"
                        label="状态"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="Payed"
                        label="已付"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="UnPayed"
                        label="未付"
                        width="120">
                </el-table-column>
            </el-table>
        </div>

        <div class="pages" v-if="pageTotal > pageInfo.pagecount" style="text-align: right;margin:30px 20px 30px 0;">
            <el-pagination
                    background
                    @current-change="currentChange"
                    layout="prev, pager, next, jumper, ->"
                    :current-page="formData.pageindex"
                    :page-size="pageInfo.pagecount"
                    :total="pageTotal">
            </el-pagination>
        </div>

    </div>
</div>

<script src="./source/js/lib/vue.min.js"></script>
<script src="./source/js/lib/jquery.min.js"></script>
<script src="./source/js/lib/element-ui@2.4.0.index.js"></script>
<script src="./source/js/common.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data : {
            loading:false,
            formData: {
                "createdate":"",				    /*创建日期*/
                "enddate":"",				    /*截至日期*/
                "pageindex":1,				           /*页码*/
                "account":user.account,		   /*账套实例*/
                "pagecount":pageInfo.pagecount
            },
            pageTotal:1,
            listData: []
        },
        methods:{
            apiGetList:function(){
                var _this = this;
                this.loading = true;
                $.ajax({
                    url:apiUrl+'/RptDetialQuery',
                    type:'GET',
                    data:{'json':JSON.stringify(_this.formData)},
                    //dataType :'jsonp',
                    success:function(datas){
                        if(datas.Success===true){
                            _this.listData = datas.OrderLists ;
                            _this.pageTotal = datas.Count;
                        }else{
                            datas.Msg &&  _this.$message.error(datas.Msg);
                        }

                        // _this.listData = datas.OrderLists;
                    },
                    error:function(datas){
                        // console.log(datas)
                        datas.Msg && _this.$message.error(datas.Msg);
                    },
                    complete:function(){
                        _this.loading = false;
                    }
                });
            },
            currentChange:function(cur){
                console.log(cur)
                var _this = this;
                this.formData.pageindex = cur;
                this.$nextTick(function(){
                    _this.apiGetList();
                })
            },
            onSearch:function() {
                var _this = this;

                if(this.formData.createdate && this.formData.enddate){
                    var sTime = new Date(this.formData.createdate.replace(/-/g,'/')).getTime();
                    var eTime = new Date(this.formData.enddate.replace(/-/g,'/')).getTime();
                    if( sTime > eTime){
                        this.$message.error('截止日期必须大于等于开始日期');
                        return false;
                    }
                }
                this.formData.pageindex = 1;
                this.$nextTick(function(){
                    _this.apiGetList();
                })
            },
            exportExcel:function(){
                window.location.href = apiUrl2+'/RptDetialExport?json='+encodeURIComponent(JSON.stringify(this.formData));
            }
        },
        created:function(){
            this.apiGetList()
        }
    })
</script>
</body>
</html>